<template>
  <div class="recommend-container container">
    <div class="recommend-nav">
      <ul class="nav-box">
        <li class="nav-item nav-item-left">猜你喜欢</li>
        <li class="nav-item nav-item-right">为你甄选最合适的</li>
      </ul>
    </div>
    <div class="recommend-list">
      <a
        class="recommend-item"
        target="_blank"
        v-for="recommend in recommendPoiList"
        :key="recommend.itemId"
        @click.prevent="handleLikeDetail(recommend.itemId, recommend.title)"
      >
        <div class="card-container">
          <div class="recommend-card-wrapper">
            <div class="img-box">
              <img :src="recommend.imgUrl" class="img-item" />
            </div>
            <div class="info-box">
              <div class="info-name title">
                {{ recommend.title }}
              </div>
              <div class="score-line">
                <div class="score">
                  <div class="rate-stars">
                    <ul class="stars-light stars">
                      <li>
                        <i class="iconfont icon-xingxing xingxing-light"></i>
                      </li>
                      <li>
                        <i class="iconfont icon-xingxing xingxing-light"></i>
                      </li>
                      <li>
                        <i class="iconfont icon-xingxing xingxing-light"></i>
                      </li>
                      <li>
                        <i class="iconfont icon-xingxing xingxing-light"></i>
                      </li>
                      <li>
                        <i class="iconfont icon-xingxing xingxing-dark"></i>
                      </li>
                    </ul>
                  </div>
                  <div class="comment-number">{{ recommend.commentNum }}</div>
                </div>
              </div>
              <div class="desc-line">
                <div class="desc">{{ recommend.areaName }}</div>
              </div>
              <div class="bottom-line">
                <div class="price-box">
                  <span class="yuan">￥</span>
                  <span class="price-number">{{ recommend.avgPrice }}</span>
                  <span class="price-desc">起</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "Like",
};
</script>

<script setup>
import { ref, onMounted } from "vue";
import { getLikeInfoApi } from "../../../../api/like/like";
import { useRouter } from "vue-router";

const recommendPoiList = ref([]);
const router = useRouter();

// const id=recommendPoiList.itemId
onMounted(async () => {
  recommendPoiList.value = await getLikeInfoApi();
});

/********************点击跳转猜你喜欢详情页************************* */
const handleLikeDetail = (itemId, title) => {
  router.push({ path: "/likeDetail", query: { id: itemId, name: title } });
};
</script>

<style scoped>
.price-desc {
  font-size: 12px;
  margin-left: 4px;
  font-weight: 700;
}
.price-number {
  font-size: 22px;
}
.yuan {
  font-size: 14px;
  font-weight: 700;
}
.bottom-line {
  height: 28px;
}
.score-line div {
  display: inline-block;
}
.score-line {
  height: 24px;
}
.xingxing-dark {
  color: #c3c3c3;
}
.xingxing-light {
  color: #ff9900;
}
.stars {
  display: flex;
}
.recommend-container {
  /* width: 950px; */
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
}
.recommend-nav {
  width: 100%;
  height: 44px;
  line-height: 44px;
  box-sizing: border-box;
  font-size: 14px;
  color: #fff;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  background-color: #4ab8d3;
}
ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-box {
  position: relative;
}
.nav-item {
  left: 0;
  padding: 0 5px;
  cursor: pointer;
}
.nav-item-left {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
  margin-left: 13px;
  margin-right: 10px;
}
.nav-item-right {
  position: absolute;
  left: 105px;
}
.recommend-list {
  width: 100%;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-top: 0;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 10px 10px 20px;
  box-sizing: border-box;
  overflow-y: hidden;
  text-align: left;
}
a {
  text-decoration: none;
}
.recommend-item {
  width: 20%;
  box-sizing: border-box;
  vertical-align: middle;
  display: inline-block;
}
.card-container {
  padding: 10px;
}
.recommend-card-wrapper {
  width: 100%;
  box-sizing: border-box;
}
.img-box {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  height: 119.26px;
}
.img-box img {
  width: 100%;
}
.info-box {
  position: relative;
  margin-top: 10px;
}
.info-name {
  font-size: 16px;
  line-height: 22px;
  width: 100%;
  height: 22px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.title {
  color: #222222;
  font-weight: 500;
}
.rate-stars {
  width: 84px;
  height: 24px;
}
.comment-number {
  font-size: 12px;
  color: #999;
  height: 24px;
  line-height: 24px;
  margin-left: 10px;
}

.desc {
  height: 18px;
  font-size: 12px;
  color: #999999;
  width: 100%;
  height: 18px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
}
.price-box span {
  color: #ff6600;
}
</style>
